<template>
	<view class="box">
		<view class="top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<view class="toptitle" style="line-height: 88rpx;">增加员工</view>
			<image class="back" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" @click="back" />
		</view>
		<view class="content">
			<view class="inputBox">
				<view class="login-box">
					<view class="login-box_s">
						<view class="input_span">员工姓名</view>
						<view class="input-box">
							<input v-model="nikeName" placeholder="请输入员工姓名" placeholder-class="input-placeholder"  />
						</view>
					</view>
					<view class="login-box_s">
						<view class="input_span">手机号</view>
						<view class="input-box">
							<input v-model="phone" maxlength="11" placeholder="需填写员工帮帮同城注册手机号" placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="login-box_s">
						<view class="input_span">验证码</view>
						<view class="input-box">
							<input v-model="Verifys" maxlength="6" type="number" placeholder="请输入验证码" placeholder-class="input-placeholder" />
							<view class="getcode" @click="getcode">{{ content }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="button" @click="saveEmployee">保存</view>
		</view>
		<view class="motaikuang" v-show="show" @click="show = false">
			<div class="verify" @click.stop="aaa">
				<verify :show="show" @Handle="Handle"></verify>
			</div>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "@/utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	import Verify from "@/components/VueImageVerify.vue";
	export default {
		data() {
			return {
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				phone: "",
				type: "",
				text: "",
				code: "",
				nikeName: "",
				content: "获取验证码",
				Verifys: "",
				show: false,
				canClick: true,
				totalTime: 60,
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		components: {
			verify: Verify
		},
		methods: {
			// 保存员工信息
			saveEmployee(){
				let that=this
				var status = true;
				if (that.nikeName == '') {
					uni.showToast({
						title: "请填写姓名",
						icon: "none",
						mask: true,
					});
					status = false;
					return false
				}
				if (that.phone==this.userInfo.phone) {
					uni.showToast({
						title: "您已是商家身份不能将自己添加为员工，请更换！",
						icon: "none",
						mask: true,
					});
					status = false;
					return false
				}
				if (!that.reg_tel.test(that.phone)) {
					uni.showToast({
						title: "请填写正确的手机号码",
						icon: "none",
						mask: true,
					});
					status = false;
					return false
				}
				if (that.Verifys != that.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true,
					});
					status = false;
					return false
				}
				let data = {};
				data = {
					merchantId:this.userInfo.merchantId,
					fullName:this.nikeName,
					cellphoneNumber: this.phone,
					SMS_VerificationCode: this.Verifys,
				};
				this.$myRequest.post("/api/mobile/vehicleOwner/increaseOrModifyMerchantStatff", data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						mask: true,
					});
					this.$myRequest
					.get("/api/mobile/vehicleOwner/getMerchantStaffList", {
						merchantId:this.userInfo.merchantId
					}).then(res => {
						res.merchantStaffs.forEach(v=>{
							v.active=false
						})
						uni.$emit('addeventAddStaff',JSON.parse(JSON.stringify(res.merchantStaffs.filter(item=>item.cellphoneNumber==this.phone)[0]||{})))
						setTimeout(function() {
							that.back()
						}, 500);
					});
					
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			Handle(success) {
				if (!this.canClick) return; //改动的是这两行代码
				this.canClick = false;
				this.show = false;
				this.content = this.totalTime + "s";
				this.$myRequest
					.get("/mob/login/phoneVerification.do", {
						phone: this.phone,
						type: 1
					})
					.then(res => {
						uni.showToast({
							title: '发送验证码成功',
							icon: "none",
							mask: true
						});
						this.code = res.CODE;
					});
				let clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + "s";
					if (this.totalTime < 0) {
						clearInterval(clock);
						this.content = "重新发送";
						this.totalTime = 60;
						this.canClick = true; //这里重新开启
					}
				}, 1000);
			},
			nextStep() {
				if (this.Verifys != this.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true
					});
					return;
				}
				this.totalTime = 0;
				this.content = "重新发送";
				this.Verifys = "";
				this.code = "";
			},
			getcode() {
				this.phone = this.phone.trim();
				if (!this.reg_tel.test(this.phone)) {
					uni.showToast({
						title: "请填写正确的手机号码",
						icon: "none",
						mask: true
					});
					return;
				}
				if (this.canClick) {
					this.show = true;
				}
			},
		}
	};
</script>

<style scoped lang='less'>
	page{
		background-color: #fff;
	}
	.box {
		background: #fff;
		min-height: 100vh;
		.back {
			width: 32rpx;
			height: 32rpx;
			left: 32rpx;
		}
	}

	.content {
		.input {
			width: 690rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			height: 90rpx;
			border: 1rpx solid #e0e0e0;
			font-size: 30rpx;

			input {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inputBox {
		height: 492rpx;
		padding-top: 30rpx;
	}

	.button {
		width: 550rpx;
		height: 76rpx;
		margin: 0 auto;
		color: #fff;
		background: #64b6a8;
		border-radius: 10000rpx;
		font-size: 34rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.userHeader {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.input-placeholder {
		color: #999999;
	}

	.login-box {
		padding: 90rpx 100rpx 0;
		.login-box_s{
			display: flex;
			align-items: center;
			margin-bottom: 52rpx;
			.input_span{
				width: 130rpx;
				text-align:left;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
			.input-box {
				flex: 1;
				height: 65rpx;
				border-bottom: 1rpx solid #d0d0d0;
				position: relative;
			
				input {
					width: 100%;
					height: 64rpx;
					line-height: 64rpx;
					color: #333;
					font-size: 28rpx;
				}
			
			
				.line {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					color: #333;
					left: 60rpx;
					height: 30rpx;
					width: 2rpx;
					background: #333;
				}
			
				.getcode {
					position: absolute;
					top: 50%;
					right: 0;
					transform: translateY(-50%);
					color: #64b6a8;
					font-size: 26rpx;
					z-index: 10;
					width: 156rpx;
					height: 50rpx;
					border-radius: 10rpx;
					border: 1px solid #64B6A8;
					text-align: center;
					line-height: 50rpx;
				}
			}
		}

		.login {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			background: #64b6a8;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 38rpx;
			margin-bottom: 24rpx;
		}
	}

	.motaikuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.verify {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
